<template>
  <view class="entry-page">
    <view class="info">
      <view class="class-task-info">
        <view class="course-info">
          <view class="course-name-num">

            <view class="course-name">
              {{ info.courseInfo.courseName }}
              ({{
                                info.courseInfo.useLevelFlag
                                    ? info.courseInfo.levelDetail
                                    : info.courseInfo.fullScore
                            }})
              <!-- <view class="edit-icon"></view> -->
            </view>
            <view class="course-remark" v-if="!info.publish" @click="showModal('courseRemark')">
              科目备注
              <u-icon name="edit-pen" color="#4174fd" size="18">
              </u-icon>
            </view>
            <view class="publish-icon" v-else></view>
          </view>
        </view>
        <view class="task-name">
          {{ info.scopeAndType.split("-")[0] }} - {{ info.name }}
        </view>
        <view class="teacher-time">
          <text>{{ info.teacherName }}</text>
          <text>最近更新时间：{{ info.showUpdateTime }}</text>
        </view>
      </view>
    </view>
    <view class="list">
      <view class="student-list">
        <view class="class-rank" v-if="info.publish && !info.courseInfo.useLevelFlag">
          <view class="rank-link" @click="goClassRank">
            班级排名
            <u-icon name="arrow-right" color="#4174FD" style="margin-left: 20rpx"></u-icon>
          </view>
        </view>
        <view class="sort-title">
          <view :class="[
                            'sort-item',
                            sort == 'studentCode' ? 'active' : '',
                        ]" @click="sortChange('studentCode')">
            按学号排序</view>
          <view :class="[
                            'sort-item',
                            sort == 'studentSeatCode' ? 'active' : '',
                        ]" @click="sortChange('studentSeatCode')">
            按座次排序</view>
          <view :class="[
                            'sort-item',
                            sort == 'studentName' ? 'active' : '',
                        ]" @click="sortChange('studentName')">
            按姓名排序</view>
        </view>

        <view class="entry-list" v-if="inputShow">
          <view class="entry-item" v-for="(itemStudent, index) in info.studentList" :key="itemStudent.studentCode">
            <view class="student-name">
              <view>
                <view class="name">{{ itemStudent.studentName }}
                </view>
                <view class="set-code" v-if="sort == 'studentCode'">
                  {{ itemStudent.studentCode }}
                </view>
                <view class="set-code" v-if="sort == 'studentSeatCode'">
                  {{ itemStudent.studentSeatCode }}
                </view>
              </view>
            </view>

            <view class="entry-box" v-if="!info.publish">
              <!-- 分数 -->
              <view class="entry-num" v-if="!info.courseInfo.useLevelFlag">
                <u-input class="input" v-model="info.studentList[index].score" border="surround" type="digit" :customStyle="{
                                        width: '100%',
                                        height: '100%',
                                        padding: '0',
                                        textAlign: 'center',
                                    }" placeholder="输入分数(可不填)" style="font-size: 14rpx !important;"></u-input>
              </view>

              <view class="level-select" v-else :style="{
                                    color: itemStudent.score ? '#333' : '#ccc',
                                }" @click="showlevel(itemStudent)">
                {{
                                    itemStudent.score
                                        ? itemStudent.score
                                        : "请选择等级"
                                }}
              </view>
            </view>
            <view class="entry-box" v-else>
              {{ itemStudent.score ? itemStudent.score : "-" }}
            </view>

            <view class="entry-remark" v-if="!info.publish">
              <view class="unremark entry-remark-item" @click="showModal('studentRemark', itemStudent)" v-if="!itemStudent.remark">
                <view class="unremark-icon icon"></view>
                备注
              </view>
              <view class="remark entry-remark-item" v-else @click="showRemark(itemStudent)">
                <view class="remark-icon icon"></view>
                查看
              </view>
            </view>
            <view class="entry-remark" v-else>
              <view class="un-remark" v-if="!itemStudent.remark">
                未备注
              </view>
              <view class="remark entry-remark-item" v-else @click="showRemark(itemStudent)">
                <view class="remark-icon icon"></view>
                查看
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>

    <view class="action-btn" v-if="info.publish">
      <view class="reset" @click="unPub">取消发布成绩</view>
      <view v-if="!info.classRank" class="entry" @click="toggelRank">
        {{ info.classRank ? "取消公布排名" : "公布班级排名" }}
      </view>
      <view v-else class="entry" @click="toggelRankOld">
        取消公布排名
      </view>
    </view>

    <view class="action-btn" v-else>
      <view class="reset" @click="save">保存</view>
      <view class="reset" @click="saveAndPublish">保存并发布</view>
    </view>

    <!-- modal -->
    <u-modal :show="modalVisible" v-if="!info.publish" @cancel="modalVisible = false" @confirm="confirmFn" ref="uModal" showCancelButton confirmText="修改" :asyncClose="true">
      <view class="remark-content">
        <view class="close">
          <u-icon name="close" size="18" @click="modalVisible = false"></u-icon>
        </view>
        <view class="head">
          <view class="course-name">
            <view class="course">{{ info.courseInfo.courseName }}
            </view>
            <view class="name">{{ remarkInfo.studentName }}</view>
          </view>
          <view class="score" v-if="remarkInfo.score">
            <view class="num">{{ remarkInfo.score }}</view>
            {{ !info.courseInfo.useLevelFlag ? "分" : "" }}
          </view>
        </view>
        <view class="remark">
          <view class="head">
            <view class="icon"></view>
            成绩备注
          </view>
          {{ remarkInfo.remark }}
        </view>
      </view>
    </u-modal>
    <u-modal v-else :show="modalVisible" @cancel="modalVisible = false" @confirm="confirmFn" ref="uModal" :showConfirmButton="false" confirmText="修改">
      <view class="remark-content">
        <view class="close">
          <u-icon name="close" size="18" @click="modalVisible = false"></u-icon>
        </view>
        <view class="head">
          <view class="course-name">
            <view class="course">{{ info.courseInfo.courseName }}
            </view>
            <view class="name">{{ remarkInfo.studentName }}</view>
          </view>
          <view class="score" v-if="remarkInfo.score">
            <view class="num">{{ remarkInfo.score }}</view>
            {{ !info.courseInfo.useLevelFlag ? "分" : "" }}
          </view>
        </view>
        <view class="remark">
          <view class="head">
            <view class="icon"></view>
            成绩备注
          </view>
          {{ remarkInfo.remark }}
        </view>
      </view>
    </u-modal>

    <u-modal :show="pubVisible" :title="pubTitle" showCancelButton @confirm="pubSave" @cancel="pubCancel">
      <view style="width: 100%">
        <view style="text-align: center; color: #999999">
          发布成绩后，</view>
        <view style="text-align: center; color: #999999">
          相关教师和家长均可看到成绩。
        </view>
      </view>
    </u-modal>
    <u-popup :show="show" :round="10" mode="center" @close="close" :closeable="true">
      <view class="wrap wraps">
        <view class="title"><text>请选择发布方式</text></view>
        <view class="content" style="margin-top: 60rpx;">
          <view :class="['btns',selectState  ? 'btnsNo' : '']" @click="publichs('score')">
            <text>分数</text>
          </view>
          <view :class="['btns',selectState  ? '' : 'btnsNo']" style="margin-left: 30rpx;" @click="publichs('lv')">
            <text>等级</text>
          </view>
        </view>
        <view style="margin-top: 60rpx;">
          <!-- <view class="surebtn" @click="setscore"> -->
          <view class="surebtn" @click="examClassPublishFn">
            <text>发布</text>
          </view>
        </view>
      </view>
    </u-popup>
    <u-popup :round="10" :show="show2" mode="center" @close="close2" :closeable="true">
      <view class="wrap" style="position: relative">
        <view class="first" style="display: flex;justify-content: center;margin-top: 80rpx;text-align: center;">
          <view style="margin-top: 10rpx;"><text>请选择公布排名范围:</text></view>
          <uni-data-select v-model="value" :localdata="range" style="margin-left: 30rpx;width: 200rpx;" />
        </view>
        <view class="second" v-if="value===1" style="display: flex;margin-top: 30rpx;text-align: center;justify-content: center;">
          <view style="display: flex;flex-direction: column;">
            <text>请输入要公布的排名范围:</text>
            <text style="color: red;">输入10则公布前10名排名</text>
          </view>
          <input placeholder="请输入内容" v-model="rangename" style="width: 150rpx;margin-left: 30rpx;margin-top:30rpx;border: 1px solid rgb(229, 229, 229)" />
        </view>
        <view class="second" v-if="value===2" style="display: flex;margin-top: 30rpx;text-align: center;justify-content: center;" @click="jump">
          <view>
            <text>请输入要公布的排名范围:</text>
          </view>
          <input placeholder="请选择学生" v-model="checkedTeacherList" style="width: 180rpx;margin-left: 30rpx;border: 1px solid rgb(229, 229, 229)" />
        </view>
        <view class="footer">
          <view class="btn reset font-PF-M" @click="close2">取消</view>
          <view class="btn ok font-PF-M" @click="submitEvt">确定</view>
        </view>
      </view>
    </u-popup>
    <u-toast ref="uToast" />
    <Remark :visible="remarkVisible" @change="remarkChange" :title="title" :remark="remark" :classCourseId="classCourseId"></Remark>

    <!-- 选择等级 -->
    <u-picker :show="showlevelPicker" :columns="[templateList]" @confirm="checkLevel" @cancel="showlevelPicker = false">
    </u-picker>
  </view>
</template>

<script>
import {
  inputDetailId,
  resultSave,
  publishToggle,
  classRankToggle,
  classPublishCheck,
  examClassPublish,
  openClassRank,
} from "@/pages/achievement/api/teacher.js"
import Remark from "./components/remark.vue"

// import { getInfoTypeList } from '@/pages/achievement/static/js/getInfoTypeList.js';

import {
  studentCodeSort,
  studentSeatCodeSort,
  studentNameSort,
} from "@/pages/achievement/static/js/sort.js"
import { mapState } from "vuex"
export default {
  data() {
    return {
      userList: [],
      checkedTeacherList: "",
      selectState: false,
      rangename: "",
      value: 0,
      range: [
        {
          value: 0,
          text: "全部",
        },
        {
          value: 1,
          text: "排名",
        },
        {
          value: 2,
          text: "自定义",
        },
      ],
      show: false,
      show2: false,
      inputShow: true,
      sort: "studentCode", // 排序tag
      showlevelPicker: false,
      editStudent: {},
      templateList: [],
      classCourseId: "",
      remarkVisible: false,
      modalVisible: false,
      modalType: "",
      remarkInfo: {},
      info: {
        scopeAndType: "",
      },
      pubTitle: "",
      pubVisible: false,
    }
  },
  components: {
    Remark,
  },
  computed: {
    ...mapState(["userInfo"]),
    title() {
      if (this.modalType == "courseRemark") {
        return "科目备注"
      } else {
        return "成绩备注"
      }
    },
    remark() {
      if (this.modalType == "courseRemark") {
        return this.info.remark
      } else {
        return this.remarkInfo.remark
      }
    },
  },
  onShow() {
    if (this.userInfo.userType === "P") {
      uni.redirectTo({
        url: "/pages/index/index",
      })
    }
    if (uni.getStorageSync("userListAchi")) {
      this.userList = JSON.parse(uni.getStorageSync("userListAchi"))
      if (this.userList.length > 0) {
        this.checkedTeacherList = "已选择" + this.userList.length + "名学生"
      }
    }
  },
  onLoad(options) {
    if (options?.classCourseId) {
      this.classCourseId = options.classCourseId
      this.getInfo()

      // this.getJobDetailStudentLists(options.jobId)
    }
  },
  methods: {
    async submitEvt() {
      const params = {
        examId: this.info.examId,
        isOpen: true,
        classRankFlag: this.value + 1,
        classRankRange: this.rangename,
        classRankStudentList: this.userList,
        classCourseId: this.classCourseId,
      }
      try {
        const data = await openClassRank(params)
        if (data.success) {
          //   this.$message.success('操作成功')
          //   this.getJob()
          //   this.getGradePlanDetail()
          //   this.visibleLook = false
          uni.showToast({
            icon: "success",
            title: "操作成功",
          })
          this.show2 = false
          this.getInfo()
        }
      } catch (error) {
        console.log(error)
      }
    },
    jump() {
      uni.navigateTo({
        url: `/pages/achievement/pages/teacher/chooseStudent?examId=${this.info.examId}&classId=${this.info.classId}&classCourseId=${this.classCourseId}`,
      })
    },
    changevalue(e) {
      console.log(e, 12345, typeof e)
      console.log(this.value, 666)
    },
    async setscore() {
      const data = {
        classCourseId: this.classCourseId,
        studentList: this.info.studentList,
      }
      try {
        const data1 = await resultSave(data)
        console.log(data1)
        let err = false
        let errMsg = ""
        for (let item of data1?.data?.list) {
          if (!item.isAllRight) {
            err = true
            errMsg = item.desc
            break
          }
        }
        if (err) {
          this.pubCancel()
          return uni.showToast({
            icon: "none",
            title: errMsg,
          })
        }
        await publishToggle(this.classCourseId)
        uni.showToast({
          icon: "success",
          title: "操作成功",
        })
        this.show = false
        this.pubCancel()
        this.getInfo()
      } catch (e) {
        console.log(e)
        uni.showToast({
          icon: "none",
          title: e.msg,
        })
        this.pubCancel()
      }
    },
    publichs(type) {
      if (type === "lv") {
        this.selectState = true
        if (!this.settingLevelFlag) {
          this.selectState = false
          uni.showToast({
            title: "该考试未设置等级规则,暂时无法按照等级发布",
            icon: "none",
            duration: 2000,
          })
        }
      } else {
        this.selectState = false
      }
    },
    close() {
      this.show = false
    },
    close2() {
      this.show2 = false
    },
    confirmFn() {
      this.modalVisible = false
      this.showModal("studentRemark", this.remarkInfo)
    },
    //  选择分数等级
    // async getLevel() {
    // 	if (!this.templateList.length) {
    // 		const templateInfo = await getInfoTypeList(
    // 			'等级默认')
    // 		console.log(templateInfo)
    // 		this.templateList = templateInfo.infoList
    // 	}
    // },
    async getInfo() {
      const { data } = await inputDetailId(this.classCourseId)
      console.log(data)
      if (data.courseInfo.useLevelFlag) {
        this.templateList = data.courseInfo.levelDetail.split("/")
      }
      this.info = data
      this.sortChange("studentCode")
    },
    sortChange(type) {
      this.sort = type
      // console.log(type)
      // for (let item of this.info.studentList) {
      // 	console.log(item[type])
      // 	console.log(pinyin.getSpell(item[type]).replace('[', '').split('')
      // 		.shift()
      // 		.toLocaleUpperCase())

      // }
      this.inputShow = false
      if (type == "studentCode") {
        this.info.studentList = studentCodeSort(this.info.studentList, type)
      } else if (type == "studentSeatCode") {
        let unEmptylist = this.info.studentList?.filter((item) => !!item[type])

        let emptyList = this.info.studentList?.filter((item) => !item[type])

        let codeList = unEmptylist.map((item) => item[type]).sort()
        codeList = studentSeatCodeSort(codeList)

        unEmptylist = unEmptylist.sort(
          (a, b) => codeList.indexOf(a[type]) - codeList.indexOf(b[type])
        )
        emptyList = studentNameSort(emptyList)

        this.info.studentList = [...unEmptylist, ...emptyList]
      } else {
        this.info.studentList = studentNameSort(this.info.studentList, type)
      }
      this.$nextTick(() => {
        this.inputShow = true
      })
    },
    // nameSort(list) {
    //     return list.sort((a, b) => {
    //         let a1 = pinyin
    //             .getSpell(a[type])
    //             .replace("[", "")
    //             .split("")
    //             .shift()
    //             .toLocaleUpperCase()
    //         let b1 = pinyin
    //             .getSpell(b[type])
    //             .replace("[", "")
    //             .split("")
    //             .shift()
    //             .toLocaleUpperCase()
    //         if (a1 < b1) {
    //             return -1
    //         } else if (a1 > b1) {
    //             return 1
    //         } else {
    //             return 0
    //         }
    //     })
    // },
    showlevel(itemStudent) {
      this.showlevelPicker = true
      this.editStudent = itemStudent
    },
    showModal(type, item) {
      console.log(item)
      this.modalType = type
      this.remarkVisible = true
      this.remarkInfo = {
        ...item,
      }
    },
    remarkChange(data) {
      if (this.modalType == "courseRemark") {
        // this.getInfo()
        this.info.remark = data.data.remark
      } else {
        // this.info.studentList[this.index].remark = data.data.remark
        for (let item of this.info.studentList) {
          if (item.studentResultId == this.remarkInfo.studentResultId) {
            item.remark = data.data.remark
          }
        }
      }
      this.modalType = ""
      this.remarkVisible = false
      this.remarkInfo = {}
    },
    checkLevel(item) {
      console.log(item)
      const level = item.value[0]
      // this.info.studentList[this.index].score = level
      for (let i = 0; i < this.info.studentList.length; i++) {
        if (
          this.editStudent.studentCode == this.info.studentList[i].studentCode
        ) {
          this.info.studentList[i].score = level
          break
        }
      }

      this.showlevelPicker = false
    },
    showRemark(item) {
      this.modalType = "remark"
      this.remarkInfo = item
      this.modalVisible = true
    },
    async save() {
      const data = {
        classCourseId: this.classCourseId,
        studentList: this.info.studentList,
      }
      try {
        const data1 = await resultSave(data)
        console.log(data1)
        let err = false
        let errMsg = ""
        for (let item of data1?.data?.list) {
          if (!item.isAllRight) {
            err = true
            errMsg = item.desc
            break
          }
        }
        if (err) {
          uni.showToast({
            icon: "none",
            title: errMsg,
          })
        } else {
          uni.showToast({
            icon: "success",
            title: "保存成功",
          })
        }
      } catch (e) {
        uni.showToast({
          icon: "none",
          title: e.msg,
        })
      }
    },
    saveAndPublish() {
      this.pubTitle = "确定发布成绩？"
      for (let item of this.info.studentList) {
        if (!item.score && item.score > -1) {
          this.pubTitle = "存在未录入的学生，确定发布吗？"
          break
        }
      }

      this.pubVisible = true
    },
    async pubSave() {
      this.pubVisible = false
      this.classPublishCheckFn()
    },
    async classPublishCheckFn() {
      const data = await classPublishCheck(this.classCourseId)
      if (data.success) {
        console.log("data", data)
        if (data.data.useLevelFlag) {
          // 直接录入等级,无分数,直接发布
        //   this.planPublishDetailToggleFn()
        const data = {
        classCourseId: this.classCourseId,
        studentList: this.info.studentList,
      }
       const data1 = await resultSave(data)
        console.log(data1)
        let err = false
        let errMsg = ""
        for (let item of data1?.data?.list) {
          if (!item.isAllRight) {
            err = true
            errMsg = item.desc
            break
          }
        }
        if (err) {
          this.pubCancel()
          return uni.showToast({
            icon: "none",
            title: errMsg,
          })
        }
        const params = {
          classCourseId: this.classCourseId,
          isPublish: true,
          useLevelFlag: true,
        }
        try {
          await examClassPublish(params)
          uni.showToast({
            icon: "success",
            title: "操作成功",
          })
          this.pubCancel()
          this.getInfo()
          this.show = false
        } catch (error) {
          console.log(error)
          this.show = false
        }
        } else {
          // 学校是否设置等级转换规则（true：有设置等级转换，false：无设置）
          // if (data.data.settingLevelFlag) {
          this.show = true
          // this.visible = true
          this.settingLevelFlag = data.data.settingLevelFlag
          // } else {
          //   this.planPublishDetailToggleFn(classCourseId)
          // }
        }
      }
    },
    async examClassPublishFn() {
      const data = {
        classCourseId: this.classCourseId,
        studentList: this.info.studentList,
      }
      try {
        const data1 = await resultSave(data)
        console.log(data1)
        let err = false
        let errMsg = ""
        for (let item of data1?.data?.list) {
          if (!item.isAllRight) {
            err = true
            errMsg = item.desc
            break
          }
        }
        if (err) {
          this.pubCancel()
          return uni.showToast({
            icon: "none",
            title: errMsg,
          })
        }
        const params = {
          classCourseId: this.classCourseId,
          isPublish: true,
          useLevelFlag: this.selectState,
        }
        try {
          await examClassPublish(params)
          uni.showToast({
            icon: "success",
            title: "操作成功",
          })
          this.pubCancel()
          this.getInfo()
          this.show = false
        } catch (error) {
          console.log(error)
          this.show = false
        }
      } catch (e) {
        console.log(e)
        uni.showToast({
          icon: "none",
          title: e.msg,
        })
        this.pubCancel()
      }
    },
    // 该接口已废弃
    async planPublishDetailToggleFn() {
      // 原发布处理代码
      // =======>
      const data = {
        classCourseId: this.classCourseId,
        studentList: this.info.studentList,
      }
      try {
        const data1 = await resultSave(data)
        console.log(data1)
        let err = false
        let errMsg = ""
        for (let item of data1?.data?.list) {
          if (!item.isAllRight) {
            err = true
            errMsg = item.desc
            break
          }
        }
        if (err) {
          this.pubCancel()
          return uni.showToast({
            icon: "none",
            title: errMsg,
          })
        }
        await publishToggle(this.classCourseId)
        uni.showToast({
          icon: "success",
          title: "操作成功",
        })
        this.pubCancel()
        this.getInfo()
      } catch (e) {
        console.log(e)
        uni.showToast({
          icon: "none",
          title: e.msg,
        })
        this.pubCancel()
      }
    },
    pubCancel() {
      this.pubVisible = false
    },
    async unPub() {
      if (this.info.finished) {
        return uni.showToast({
          icon: "none",
          title: "该考试已结束，无法取消",
        })
      }
      try {
        await publishToggle(this.classCourseId)
        uni.showToast({
          icon: "success",
          title: "操作成功",
        })
        this.getInfo()
      } catch (e) {
        console.log(e)
        uni.showToast({
          icon: "none",
          title: e.msg,
        })
      }
    },
    async toggelRank() {
      this.value = "0"
      ;(this.rangename = ""), (this.checkedTeacherList = "")
      this.show2 = true
      // 原
      // try {
      //     await classRankToggle(this.classCourseId)
      //     uni.showToast({
      //         icon: "success",
      //         title: "操作成功",
      //     })
      //     this.getInfo()
      // } catch (e) {
      //     console.log(e)
      //     uni.showToast({
      //         icon: "none",
      //         title: e.msg,
      //     })
      // }
    },
    async toggelRankOld() {
      // this.show2 = true
      // 原
      try {
        await classRankToggle(this.classCourseId)
        uni.showToast({
          icon: "success",
          title: "操作成功",
        })
        this.getInfo()
      } catch (e) {
        console.log(e)
        uni.showToast({
          icon: "none",
          title: e.msg,
        })
      }
    },
    goClassRank() {
      // uni.navigateTo({
      // 	url: `/pages/achievement/pages/teacher/classRank?classCourseId=${this.classCourseId}`,
      // })
      uni.navigateTo({
        url: `/pages/achievement/pages/teacher/analysis?examId=${this.info.examId}&classId=${this.info.classId}&className=${this.info.className}&courseId=${this.info.courseInfo.courseId}&courseName=${this.info.courseInfo.courseName}&name=${this.info.name}&type=classRank`,
      })
    },
  },
}
</script>

<style lang="scss" scoped>
.entry-page {
  box-sizing: border-box;
  height: 100vh;
  padding: 20rpx 0 0;
  background: #f2f4f9;
  overflow-y: scroll;
}

.info {
  padding: 0 30rpx;
}

.class-task-info {
  box-sizing: border-box;
  height: 238rpx;
  background: linear-gradient(135deg, #7688ff, #4275fd);
  border-radius: 16rpx;
  padding: 32rpx 24rpx;
  color: #fff;
  margin-bottom: 20rpx;
}

.course-name-num {
  height: 56rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: 600;
  line-height: 56rpx;

  .course-name {
    display: flex;
    justify-content: flex-start;
    align-items: center;
  }

  .edit-icon {
    width: 36rpx;
    height: 36rpx;
    margin-left: 8rpx;
    background: url("@/pages/achievement/static/img/edit-icon1.png") 0 0
      no-repeat;
    background-size: 100% 100%;
  }
}

.course-remark {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 196rpx;
  height: 56rpx;
  background: #ffffff;
  border-radius: 28px;
  font-weight: 400;
  color: #4174fd;
}

.publish-icon {
  width: 108rpx;
  height: 102rpx;
  background: url("@/pages/achievement/static/img/pub.png") 0 0 no-repeat;
  background-size: 100% 100%;
  margin-top: 30rpx;
}

.task-name {
  width: 100%;
  margin: 8rpx 0 32rpx 0;
  height: 42rpx;
  font-size: 30rpx;
  color: #ffffff;
  line-height: 42rpx;
}

.teacher-time {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 36rpx;
  opacity: 0.7;
  font-size: 26rpx;
  color: #ffffff;
  line-height: 36rpx;
}

.list {
  padding: 0 30rpx;
  height: calc(100vh - 450rpx);
  overflow-y: scroll;
}

.student-list {
  background: #ffffff;
  border-radius: 16rpx;
}

.sort-title {
  height: 88rpx;
  display: flex;
  justify-content: space-between;
  margin-bottom: 24rpx;
  color: #333;

  .sort-item {
    position: relative;
    width: 150rpx;
    height: 88rpx;
    line-height: 88rpx;
    text-align: center;
    color: #333;
    font-size: 30rpx;
    margin: 0 24rpx;
  }

  .active {
    color: #4174fd;
    position: relative !important;

    &::after {
      position: relative;
      top: -52rpx;
      // position: absolute;
      // left: calc(50% - 15rpx);
      // bottom: 8rpx;
      display: inline-block;
      content: " ";
      width: 30rpx;
      height: 6rpx;
      background: #4275fd;
      border-radius: 4rpx;
    }
  }
}

.entry-list {
  .entry-item {
    width: 100%;
    height: 112rpx;
    display: flex;
    justify-content: flex-start;

    .student-name,
    .entry-box,
    .entry-remark,
    .title {
      width: 230rpx;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .title {
      font-weight: 600;
    }

    .student-name {
      justify-content: flex-start;
      padding-left: 24rpx;

      .name {
        height: 42rpx;
        font-size: 30rpx;
        color: #333333;
        line-height: 42rpx;
      }

      .set-code {
        height: 36rpx;
        font-size: 26rpx;
        color: #999999;
      }
    }

    .entry-num {
      border: 1px solid #d6d7d9;
      width: 210rpx;
      height: 56rpx;
      padding-left: 8rpx;
    }

    .entry-remark {
      .un-remark {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 148rpx;
        height: 56rpx;
        border-radius: 4rpx;
        background: rgba(153, 153, 153, 0.08);
        color: #d8d8d8;
        font-size: 30rpx;
      }

      .entry-remark-item {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 148rpx;
        height: 56rpx;
        border-radius: 4rpx;
        font-size: 30rpx;

        .icon {
          width: 36rpx;
          height: 36rpx;
          margin: 6rpx 8rpx 0 0;
        }
      }

      .unremark {
        color: #4174fd;
        background: rgba(65, 116, 253, 0.08);

        .unremark-icon {
          background: url("@/pages/achievement/static/img/edit-icon.png") 0 0
            no-repeat;
          background-size: 100% 100%;
        }
      }

      .remark {
        background: rgba(255, 137, 72, 0.08);
        color: #ff8948;

        .remark-icon {
          background: url("@/pages/achievement/static/img/info-icon.png") 0 0
            no-repeat;
          background-size: 100% 100%;
        }
      }
    }
  }
}

.action-btn {
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 10;
  width: 100%;
  box-sizing: border-box;
  height: 170rpx;
  background: #ffffff;
  box-shadow: 0px -2rpx 0px 0px #e5e5e5;
  // margin-bottom: 68rpx;
  padding: 14rpx 32rpx 80rpx 32rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;

  .reset {
    width: 330rpx;
    height: 72rpx;
    border: 2rpx solid #4174fd;
    border-radius: 38rpx;
    font-size: 30rpx;
    font-weight: 400;
    text-align: center;
    color: #4174fd;
    line-height: 72rpx;
  }

  .entry {
    width: 330rpx;
    height: 72rpx;
    border-radius: 38rpx;
    font-size: 30rpx;
    font-weight: 400;
    text-align: center;
    color: #ffffff;
    line-height: 72rpx;
    background: #4174fd;
  }
}
</style>
<style lang="scss">
.remark-content {
  width: calc(100% + 50px);
  margin: -25px;
  background: url("@/pages/achievement/static/img/remark-title.jpg") 0 0
    no-repeat;
  background-size: 100% 200rpx;
  padding: 32rpx;
  border-radius: 24rpx;

  .close {
    height: 36rpx;
    width: 100%;
    display: flex;
    justify-content: flex-end;
    margin-bottom: 32rpx;
  }

  .head {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .course-name {
    .course {
      height: 50rpx;
      font-size: 36rpx;
      font-weight: 600;
      text-align: center;
      color: #333333;
      line-height: 50rpx;
      margin-bottom: 8rpx;
    }

    .name {
      height: 36rpx;
      font-size: 26rpx;
      font-weight: 400;
      text-align: center;
      color: #999999;
      line-height: 36rpx;
    }
  }

  .score {
    display: flex;
    justify-content: flex-start;
    align-items: flex-end;
    font-size: 32rpx;
    color: #fe4f54;

    .num {
      font-size: 64rpx;
      font-weight: 600;
      text-align: center;
      color: #fe4f54;
    }
  }

  .remark {
    box-sizing: border-box;
    min-height: 178rpx;
    background: #f2f4fa;
    border-radius: 16rpx;
    margin-top: 28rpx;
    padding: 24rpx;

    .head {
      height: 42rpx;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      font-size: 30rpx;
      color: #4174fd;
      font-weight: 600;
      margin-bottom: 16rpx;

      .icon {
        width: 36rpx;
        height: 36rpx;
        margin-right: 16rpx;
        background: url("@/pages/achievement/static/img/chengji.jpg") 0 0
          no-repeat;
        background-size: 100% 100%;
      }
    }
  }
}

.class-rank {
  display: flex;
  justify-content: flex-end;

  .rank-link {
    display: flex;
    justify-content: flex-start;
    color: #4174fd;
    padding: 20rpx 30rpx 0;
  }
}
.wraps{
  height: 400rpx !important;

}
.wrap {
  width: 650rpx;
  height: 450rpx;

  .title {
    text-align: center;
    margin-top: 50rpx;
  }

  .content {
    display: flex;
    justify-content: space-around;
    margin-top: 20rpx;

    .btns {
      width: 200rpx;
      height: 80rpx;
      background: royalblue;
      border-radius: 10rpx;
      text-align: center;
      color: white;
      line-height: 80rpx;
    }
    .btnsNo {
      background: gray;
    }
  }

  .surebtn {
    width: 200rpx;
    height: 80rpx;
    margin-left: 440rpx;
      border-radius: 10rpx;

    background: royalblue;
    text-align: center;
    color: white;
    line-height: 80rpx;
  }
}
.footer {
  position: absolute;
  bottom: 10px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-around;
  height: 98rpx;
  //   padding: 0 24rpx;
  // background-color: #fff;
  //   border-top: 1rpx solid #e5e5e5;
  background: transparent;
  padding: 0;
  .btn {
    display: flex;
    align-items: center;
    justify-content: space-around;
    width: 230rpx;
    height: 72rpx;
    border-radius: 72rpx;
    border: 1rpx solid transparent;
    color: #fff;
    font-size: 30rpx;
    font-weight: 400;
  }
  .reset {
    color: #4275fd;
    border-color: #4275fd;
  }
  .ok {
    background-color: #4275fd;
  }
}
</style>
